<template>
    <div class="design-item">
        <div class="design-item-controller">
            <div class="design-item-controller-handle">
                <div class="design-component-coupon-preview">
                    <div class="coupon-track" :style="{'width': computeCouponList.length >= 4 ? (computeCouponList.length * 99 +20) + 'px': '100%' }">
                        <div :class="getItemClass(item.disable)" v-for="(item, index) in computeCouponList">
                            <div class="coupon-price">
                                <span>￥</span><span>{{item.cardPrice | $convertPriceInteger}}</span><span v-if="hasDecimals(item.cardPrice)">.{{item.cardPrice | $convertPriceDecimal}}</span><span v-else></span>
                            </div>
                            <div class="coupon-desc">
                                <div v-if="computeCouponList.length == 1">优惠券</div>
                                <div>{{item.cardLimitOrdersAmountText}}</div>
                            </div>
                            <div class="coupon-receive hairline-left" v-if="computeCouponList.length == 1">立即领取</div>
                            <div class="coupon-disabled-text-wrap" v-if="item.disable">
                                <div class="coupon-disabled-text">已领取</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <slot name="menu"></slot>
        </div>

        <div class="design-item-editor design-item-coupon-editor" v-show="show && !showAddMenuGroup">
            <div>
                <div class="design-item-editor-title">优惠券</div>
                <div class="editor-group">
                    <div class="editor-group-label ">添加方式：</div>
                    <div class="editor-group-control">
                        <label :class="['nc-radio-wrap',{'nc-radio-checked' : couponSource == 0 }]" @click="couponSource = 0"><span class="nc-radio"><span class="nc-radio-inner"></span></span><span>手动添加</span></label>
                        <label :class="['nc-radio-wrap',{'nc-radio-checked' : couponSource == 1 }]" @click="couponSource = 1"><span class="nc-radio"><span class="nc-radio-inner"></span></span>
                            <span>自动获取</span></label>
                    </div>
                </div>
                <div class="editor-group" v-show="couponSource == 0">
                    <div class="editor-group-control">
                        <div class="editor-card">

                            <draggable v-model="couponList" :options="{group:'people' , draggable:'.editor-card-item'}">
                                <div class="editor-card-item" v-for="(item , index ) in couponList">
                                    <div class="editor-card-item-panel">
                                        {{item.activityName}}({{item.cardLimitOrdersAmountText}})
                                    </div>
                                    <div class="design-item-btn design-item-delete" @click="bindRemoveCard(index)">
                                        <i class="fa fa-close"></i></div>
                                </div>
                            </draggable>
                            <div class="editor-card-add" @click="bindAddCard">
                                <div class="editor-card-add-text"><i class="fa fa-plus"></i>选择优惠券</div>
                            </div>
                        </div>
                        <div class="design-editor-control-group-help-desc">最多添加10张优惠券</div>
                        <div class="design-editor-control-group-error" v-if="enableValid && hasError">请选择优惠券</div>
                    </div>
                </div>
                <div class="controls-card" v-show="couponSource == 1">
                    <div class="editor-group no-mb">
                        <div class="editor-group-label">券活动数：</div>
                        <div class="editor-group-control">
                            <label :class="['nc-radio-wrap',{'nc-radio-checked' : couponNum == 0 }]" @click="couponNum = 0"><span class="nc-radio"><span class="nc-radio-inner"></span></span><span>全部</span></label>
                            <label :class="['nc-radio-wrap',{'nc-radio-checked' : couponNum > 0 }]">
                                <span class="nc-radio" @click="couponNum = 1"> <span class="nc-radio-inner"></span></span><span><div class="input-wrap"><input type="text" class="input" :value="couponNum == 0?'':couponNum" @blur="bindInputCouponNum" placeholder="请输入显示的券活动数"></div></span></label>
                        </div>
                    </div>
                </div>

                <!-- 列表样式 -->
                <!--<div class="editor-group">
                    <div class="editor-group-label editor-group-label-top">列表样式：</div>
                    <div class="editor-group-control">
                        <div class="radio-group">
                            <label :class="['nc-radio-wrap' , index == couponType ? 'nc-radio-checked' : ''] "
                                   v-for="(item , index ) in ['样式1' , '样式2' ,'样式3' , '样式4']"
                                   @click="couponType = index "
                            ><span class="nc-radio"><span class="nc-radio-inner"></span></span><span>样式1</span></label>
                        </div>
                    </div>
                </div>-->

                <!--颜色-->
                <!--<div class="editor-group">
                    <div class="editor-group-label editor-group-label-top">颜色：</div>
                    <div class="editor-group-control">
                        <div class="coupon-editor-coupon-color">

                            <div v-for="(item , index ) in ['#e74c2c' , '#ffe9b7','#ffffff' , '383b3e' , '#e0f4e4']"
                                 :class="['theme-item'  , couponColor == index ?'active' : '']"
                                 @click ="couponColor = index"
                            >
                                <span class="coupon-color" :style="{backgroundColor: item }"></span>
                            </div>

                        </div>

                    </div>
                </div>-->

                <div class="editor-group">
                    <div class="editor-group-label ">更多设置：</div>
                    <div class="editor-group-control">
                        <label :class="['nc-checkbox-wrap',{'nc-checkbox-checked' : hideEmptyCoupon == 1}]" @click="hideEmptyCoupon = hideEmptyCoupon? 0:1">
                            <span class="nc-checkbox"><span class="nc-checkbox-inner"></span></span><span>隐藏已抢完券<span class="inline-help-desc">勾选后不显示已抢完的优惠券</span></span></label>
                    </div>
                </div>
                <div class="editor-help-desc" style="margin-left: 10px;">当页面无可显示的优惠券时，优惠券区块将隐藏</div>
            </div>
        </div>
        <slot name="addMenuGroup" v-if="showAddMenuGroup"></slot>
    </div>
</template>
<script>
    import draggable from 'vuedraggable'
    /**
     * 优惠券
     */
    var defaultDataFormat = {
        // 优惠券显示数量
        couponNum: 0,
        // 优惠券来源 0.手动添加 1.自动获取
        couponSource: 0,
        // 隐藏已抢完券
        hideEmptyCoupon: 1,
        // 手动添加的优惠券列表
        couponList: [],
        // 样式
//        couponType: 0,
        // 颜色
//        couponColor: 0,
        type: "coupon"
    }
    var emptyCouponList = [
        {
            activityId: 1,
            cardPrice: 100.01,
            cardLimitOrdersAmountText: '无门槛使用'
        },
        {
            activityId: 2,
            cardPrice: 100,
            cardLimitOrdersAmountText: '满999.99可用',
            disable: true
        },
        {
            activityId: 3,
            cardPrice: 99,
            cardLimitOrdersAmountText: '满999.99可用'
        },
        {
            activityId: 4,
            cardPrice: 9.99,
            cardLimitOrdersAmountText: '满9.99可用'
        }


    ]
    let componentSetting = {
        name: "nc-design-item-coupon",
        otherInfo: {
            title: "优惠券",
            type: "coupon",
            group: 1,
            max: 0
        },
        components: {
            draggable
        },
        //外部传入参数
        props: {
            show: {
                type: Boolean,
                default: false
            },
            options: {
                type: Object,
                default: null
            },
            cid: {
                type: Number
            },
            showAddMenuGroup: {
                type: Boolean,
                default: false
            }
        },
        /*
         * 自身数据,一定要一个function
         */
        data() {
            let data = !Nc.isEmpty(this.options) ? {
                couponNum: this.options.couponNum,
                couponSource: this.options.couponSource,
                hideEmptyCoupon: this.options.hideEmptyCoupon,
                couponList: this.options.couponList,
//                couponType: this.options.couponType,
//                couponColor: this.options.couponColor,
                type: defaultDataFormat.type
            } :
                $.extend(true, {}, defaultDataFormat);
            let customData = {
                enableValid: false,
                hasError: false
            };
            return $.extend({}, data, customData);
        },
        computed: {
            computeCouponList() {
                return this.couponSource
                    ? (emptyCouponList)
                    : (this.couponList.length ? this.couponList : emptyCouponList)
            }
        },
        methods: {
            getItemClass (disable){
                let r = ["coupon-item"];
                if (this.computeCouponList.length == 1) {
                    r.push("coupon-item-one");
                } else if (this.computeCouponList.length == 2) {
                    r.push("coupon-item-two");
                }

                if (disable)
                    r.push('coupon-item-disabled')

                r.push('coupon-color' + this.couponColor)
                r.push('coupon-style' + this.couponType)
                return r
            },
            bindAddCard() {
                console.log("添加优惠券card");
                var self = this
                Nc.openCoupon({
                        max: 10 - self.couponList.length,
                        selectedArray: self.couponList
                    },
                    function (list) {
                        self.couponList = list
                        if (list.length) {
                            self.hasError = false
                        }
                        else {
                            self.enableValid && ( self.hasError = true )
                        }
                    }
                );
            },
            bindInputCouponNum(event){
                console.log("添加优惠券card", arguments)
                let a = $(event.target).val(),
                    b = parseInt(a.replace(/\D+/, '')),
                    r = isNaN(b) ? 1 : ( b < 1 ? 1 : b )
                this.couponNum = r
                $(event.target).val(r)
            },
            bindRemoveCard(index) {
                console.log("删除优惠券card", index)
                this.couponList.splice(index, 1)
            }
        }
    }
    /**
     * 判断是否有小数
     */
    componentSetting.methods.hasDecimals = function (num) {
        return (num + '' ).indexOf('.') > -1 ? true : false
    }
    /**
     * 获取当前组件的数据
     */
    componentSetting.methods.getCurrentData = function () {
        this.enableValid = true
        if (this.couponSource == 0) {
            this.hasError = this.couponList.length ? false : true
        } else {
            this.hasError = false
        }
        return !this.hasError ? {
            couponNum: this.couponNum,
            couponSource: this.couponSource,
            hideEmptyCoupon: this.hideEmptyCoupon,
            couponList: this.couponList,
            type: 'coupon'
        } : null
    }
    export default componentSetting
</script>